<script setup lang="jsx">
import { ref, onMounted, reactive, nextTick } from 'vue'
import { message, Tooltip } from 'ant-design-vue'
import { formatColumn } from '@/utils/tools.js'
import PhoneEditModal from './PhoneEditModal.vue'
import { DraggableModal } from '@/components/core/draggable-modal'
import { getPageContact, removeContact } from '@/api/comprehensive'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
  phoneInfo: {
    type: Object,
    required: true
  },
  showSearchPageLink: {
    // 弹框是否展示返回综合查询link
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['updateVisible', 'openMailModal'])

const loading = ref(false)
const ellipsisStyle = {
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  width: '150px'
}
// 获取tabledata
const columns = [
  {
    title: t('global.No'),
    width: 70,
    dataIndex: 'Index',
    customRender: ({ text, record, index }) => `${index + 1}`
  },
  {
    title: t('home.contactModal.Relationship'),
    width: 140,
    dataIndex: 'relationshipWithInsuredName',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('home.contactModal.Country'),
    width: 100,
    dataIndex: 'contactCountryName',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('home.contactModal.Province'),
    width: 100,
    dataIndex: 'contactProvinceName',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('home.contactModal.City'),
    width: 100,
    dataIndex: 'contactCityName',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('home.contactModal.Address'),
    width: 160,
    dataIndex: 'contactAddress',
    ellipsis: true,
    customRender: ({ text, record, index }) => (
      <Tooltip title={formatColumn(text)}>
        <div style={ellipsisStyle}> {formatColumn(text)} </div>
      </Tooltip>
    )
  },
  {
    title: t('home.contactModal.OfficeTel'),
    width: 120,
    dataIndex: 'officeTel',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('home.contactModal.HomeTel'),
    width: 120,
    dataIndex: 'homeTel',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('home.contactModal.Fax'),
    width: 120,
    dataIndex: 'fax',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('home.contactModal.Mobile'),
    width: 140,
    dataIndex: 'mobile',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('home.contactModal.AcceptSMS'),
    width: 160,
    dataIndex: 'msgFlagName',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: t('global.action'),
    key: 'operation',
    fixed: 'right',
    width: 200
  }
]
function handlePageChange(page, pageSize) {
  pagination.current = page
  pagination.pageSize = pageSize
  getTableList()
}
const pagination = reactive({
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  total: 0,
  onChange: handlePageChange,
  hideOnSinglePage: true
})
const dataSource = ref([])
async function getTableList() {
  loading.value = true;
  
  let res = null
  const params = {
    current: pagination.current,
    size: pagination.pageSize,
    model: {
      customId: props.phoneInfo.customer_id,
      memberId: props.phoneInfo.member_id
    }
  }
  try {
    res = await getPageContact(params)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res.isSuccess) {
    pagination.total = Number(res.data.total)
    dataSource.value = res.data.records
  }
}
async function initData() {
  pagination.current = 1
  getTableList()
}

async function handleDelete(record) {
  let res = null
  const data = {
    customId: props.phoneInfo.customer_id,
    memberId: props.phoneInfo.member_id,
    contactNo: record.contactNo
  }
  try {
    res = await removeContact(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    message.success('当前修改已完成，预计次日可查询到。')
  }
}
const phoneModalVisible = ref(false)
onMounted(async () => {
  await nextTick()
  phoneModalVisible.value = true
  initData()
})
// 新增&修改 联系方式
const phoneEditInfo = ref({})
const phoneEditVisible = ref(false)
function addPhone() {
  phoneEditInfo.value = {
    customId: props.phoneInfo.customer_id,
    memberId: props.phoneInfo.member_id,
    type: 'add'
  }
  phoneEditVisible.value = true
}
function handleUpdate(record) {
  console.log('record', record)
  phoneEditInfo.value = {
    ...record,
    customId: props.phoneInfo.customer_id,
    memberId: props.phoneInfo.member_id,
    type: 'update'
  }
  phoneEditVisible.value = true
}
function handleCancel() {
  phoneModalVisible.value = false
  emit('updateVisible', false)
}
function handleAddMail(record) {
  console.log('record', record)
  emit('openMailModal', {
    contactNo: record.contactNo,
    sourceType: 'phone',
    customer_id: record.customId,
    member_id: record.memberId
  })
}
</script>
<template>
  <DraggableModal
    v-model:open="phoneModalVisible"
    :showSearchPageLink="showSearchPageLink"
    width="1000px"
    :title="$t('home.contactModal.info')"
    @cancel="handleCancel"
  >
    <template #footer>
      <a-button key="back" @click="handleCancel">{{ $t('global.close') }}</a-button>
    </template>
    <div class="add-btn">
      <a-button type="primary" @click="addPhone">{{ $t('global.add') }}</a-button>
    </div>
    <a-table
      :scroll="{ x: 700, y: 400 }"
      :data-source="dataSource"
      :pagination="pagination"
      size="middle"
      :loading="loading"
      :columns="columns"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'operation'">
          <span class="operation" @click="handleUpdate(record)">{{ $t('global.edit') }}</span>
          <span class="splice-line"></span>
          <a-popconfirm
            :title="$t('global.confirmsDelete')"
            :ok-text="$t('global.confirms')"
            :cancel-text="$t('global.cancel')"
            @confirm="handleDelete(record)"
          >
            <span class="delete">{{ $t('global.delete') }}</span>
          </a-popconfirm>
          <span class="splice-line"></span>
          <span class="operation" @click="handleAddMail(record)">{{
            $t('home.mailModal.addEmail')
          }}</span>
        </template>
      </template>
    </a-table>
    <Teleport to="body">
      <PhoneEditModal
        :showSearchPageLink="showSearchPageLink"
        v-if="phoneEditVisible"
        :phone-edit-info="phoneEditInfo"
        @updateVisible="(visible) => (phoneEditVisible = visible)"
      ></PhoneEditModal>
    </Teleport>
  </DraggableModal>
</template>
<style lang="scss" scoped>
.operation {
  color: $color-action;
  cursor: pointer;
}
.delete {
  color: $color-action;
  cursor: pointer;
}
.add-btn {
  text-align: right;
  margin-bottom: 14px;
}
</style>
